<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>歌词滚动</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="shortcut icon" href="./public/favicon.ico" type="image/x-icon">
</head>

<body>
    <p>歌词与音乐不同步的原因：歌曲非正版，存在时长误差</p>
    <button class="btn">启动/关闭</button>
    <button class="btn download">下载歌曲</button>
    <button class="btn" onclick="location.href='https://gitee.com/ailjx/lyrics-control'">Gitee</button>

    <!-- DOM容器 -->
    <div id="container">
    </div>

    <!-- 播放接口：https://music.163.com/song/media/outer/url?id=歌曲id.mp3 -->
    <audio id="audio" controls loop autoplay src="https://music.163.com/song/media/outer/url?id=1933915376.mp3"></audio>

    <script src="./js/index.js"></script>
    <script>
        // https://netease-cloud-music-api.vercel.app/lyric?id=530057158获取歌词接口
        const words = "[00:00.000] 作词 : 唐恬/李志清\n[00:01.000] 作曲 : 林天爱\n[00:02.000] 编曲 : 付天\n[00:03.000] 制作人 : Xun\n[00:04.000] 原唱 : 戚薇\n[00:06.27]出品：网易飓风 x网易青云 LAB\n[00:14.43]总有一些话来不及说了\n[00:20.91]总有一个人是心口的朱砂\n[00:27.36]想起那些话那些傻眼泪落下\n[00:34.29]只留一句你现在好吗\n[00:43.65]如果爱忘了泪不想落下\n[00:50.10]那些幸福啊让她替我到达\n[00:56.64]如果爱懂了承诺的代价\n[01:03.12]不能给我的请完整给她\n[01:19.26]总有些牵挂旧的像伤疤\n[01:25.83]越是不碰它越隐隐的痛在那\n[01:31.98]想你的脸颊你的发我不害怕\n[01:39.12]就让时间给我们回答\n[01:45.30]如果爱忘了泪不想落下\n[01:51.450]那些幸福啊让她替我到达\n[01:57.930]如果爱懂了承诺的代价\n[02:04.439]不能给我的请完整给她\n[02:11.969]我说我忘了不痛了\n[02:15.689]那是因为太爱太懂了\n[02:18.900]笑了原谅了为你也值得\n[02:24.990]用你的快乐告诉我\n[02:28.530]现在放开双手是对的\n[02:31.590]别管我多舍不得\n[02:36.930]如果爱忘了就放他走吧\n[02:43.319]那些幸福啊让她替我到达\n[02:49.919]如果爱懂了承诺的代价\n[02:56.280]不能给我的请完整给她\n[03:01.590]如果爱忘了你还记得吗\n[03:02.189]吉他： Tommy Wu\n[03:02.550]贝斯：林维俊\n[03:02.879]和声编写：小手鹅/ Xun\n[03:03.449]和声：小手鹅/ Xun\n[03:03.870]录音师：熊宝\n[03:04.199]混音工程师：张海庚\n[03:04.770]监制：罗子欢/张三\n[03:05.219]视觉设计：谢妍\n[03:05.580]艺人统筹：李喆渊/颜恬初\n[03:06.240]企划统筹：毛不歪/黄雨薇/欧阳慧琳\n[03:07.439]出品人：谢奇笛\n[03:07.800]音乐营销：网易飓风\n[03:08.280]OP： Touch Music Publishing M Sdn Bhd\n[03:09.180]SP：北京大石音乐版权有限公司\n[03:09.188]特别鸣谢：上海安茂 (欢迎音乐合作)\n[03:10.020]【此版本为正式授权翻唱作品。未经著作权人许可，不得翻唱、翻录或使用】\n"
        /**
                 * LyricsControl参数
                 * @param {string} container 歌词容器选择器
                 * @param {string} audio audio标签选择器
                 * @param {string} words 歌词字符串
                 */
        const a = new LyricsControl('#container', '#audio', words)
        document.querySelector(".btn").addEventListener("click", () => {
            a.isRoll ? a.clear() : a.play()
        })
        a.play() // 启动

        const audio = document.querySelector("#audio");

        // 下载歌曲
        document.querySelector('.download').addEventListener("click", () => {
            downRow(audio.src)
        })

        // 下载资源，传进来一个资源的url
        function downRow(data) {
            try {
                let ajax = new XMLHttpRequest();
                ajax.open('GET', data, true);
                // 返回二进制数据
                ajax.responseType = 'blob';
                //ajx.withCredentials = true;//如果跨域
                ajax.onload = function (oEvent) {
                    let content = ajax.response;
                    let aD = document.createElement('a');
                    aD.download = '歌是你的了.mp3';
                    aD.style.display = 'none';
                    let blob = new Blob([content]);
                    aD.href = (window.URL || window.webkitURL).createObjectURL(blob);
                    document.body.appendChild(aD);
                    aD.click();
                    document.body.removeChild(aD);
                };
                ajax.send();
            } catch (e) {
                console.log('downloadError: ', e);
            }
        }

        // 键盘事件
        window.addEventListener("keypress", (e) => {
            // 监听空格事件
            if (e.code === 'Space') {
                audio.paused ? audio.play() : audio.pause()
            }

        })
    </script>
</body>

</html>